<!--
 * @Author: Cenven
 * @Date: 2021-06-29 11:43:33
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-06-30 14:35:18
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="menu_info_component">
    <div class="menu_list">
      <div :class="['menu_item', menuIndex == 1 ? 'active' : '']" @click="menuInfoHandle(1)">考试指南</div>
      <div :class="['menu_item', menuIndex == 2 ? 'active' : '']" @click="menuInfoHandle(2)">资料大纲</div>
      <div :class="['menu_item', menuIndex == 3 ? 'active' : '']" @click="menuInfoHandle(3)">学习分享</div>
    </div>
    <div class="information_list" v-if="questionInfoList.length > 0">
      <div class="information_item" @click="toPath(item.id)" v-for="(item,index) in questionInfoList" :key="item.id">
        <div class="info_item_left">
          <img :src="item.cover ? item.cover : '/img/pc/question_information.jpg'" alt="">
        </div>
        <div class="info_item_right">
          <h2 class="info_name">{{ item.title }}</h2>
          <p>{{formatDate(item.createTime)}}&emsp;&emsp;&emsp;发布者：{{ item.userName }}</p>
        </div>
      </div>
    </div>
    <div class="empty" v-else>
      <Icon type="md-chatboxes" size="70"/>
      <p>暂无资讯哟</p>
    </div>
    <Page
      style="text-align:center;margin-top:30px;"
      :total="total"
      :current="page"
      :page-size="pageSize"
      @on-change="n=>pageChange(n)"
    ></Page>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getExamInfoList,
} from "~/api/v2-question-bank/question-bank.js";
export default {
  name: "menu_info_component",
  props: ["questionId"],
  components: {},
  data() {
    return {
      menuIndex:1,
      questionInfoList:[],
      page:1,
      pageSize:10,
      total:0,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      question_record_list(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    })
  },
  watch: {},
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
    ]),
    pageChange(n){
      this.page = n;
      this.getQuestionInformation();
    },
    menuInfoHandle(i){
      this.menuIndex = i;
      this.page = 1;
      this.getQuestionInformation();
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    async getQuestionInformation(){
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        sort: "orderIndex desc",
        offset: (this.page - 1) * this.pageSize,
        limit: this.pageSize,
        status: 1,
        type: this.menuIndex
      };
      if (this.token && Object.keys(this.user_info).length > 0) {
        params = {
          ...params,
          user: this.user_info.id
        }
      }
      let result = await getExamInfoList(params);
      console.log("获取考试资讯列表:", result);
      if (result && result.data && result.data.code) {
        const { rows, total } = result.data.data;
        this.questionInfoList = rows;
        this.total = total;
      }
      this.SET_IS_LOADING(false);
    },
    toPath(id) {
      this.$router.push({
        path: "/question-information",
        query: {
          id: id
        }
      });
    }
  },
  created() {
    this.getQuestionInformation();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.menu_info_component{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 0px 20px 0;
  
  .menu_list{
    width: 100%;
    line-height: 50px;
    display: flex;
    border-bottom: 1px solid #e9edf5;
    font-size: 16px;
    font-weight: bold;
    color: #5a5e66;
    background: #ffffff;
    .menu_item{
      width: 120px;
      text-align: center;
      cursor: pointer;
      position: relative;
      &.active{
        &::after{
          content: "";
          display: block;
          position: absolute;
          width: 80%;
          height: 2px;
          left: 10%;
          bottom: 0;
          background: var(--theme-color);
        }
        
      }
    }
  }
  .information_list{
    padding: 0px 20px;
    box-sizing: border-box;
    background: #ffffff;
    .information_item{
      width: 100%;
      padding: 20px 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e9edf5;
      &:last-child{
        border-bottom: none;
      }
      .info_item_left{
        width: 150px;
        height: 100px;
        background: var(--theme-color);
        border-radius: 4px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 4px;
          overflow: hidden;
          display: block;
        }
      }
      .info_item_right{
        width: 725px;
        .info_name{
          margin-top: 2px;
          line-height: 26px;
          height: 52px;
          font-size: 18px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        p{
          font-size: 14px;
          margin-top: 22px;
        }
      }
    }
  }
  .empty{
    padding: 30px;
    box-sizing: border-box;
    background: #ffffff;
    text-align: center;
    font-size: 16px;
  }
}
</style>
